Copyright: H.Ngashima system lab.


HTMLエディター
Lets make HTML!!	ヘルプの終了

【使用にあたって】　　【使用法説明】

ひろ君とかずちゃんのＨＴＭＬ教室

ＨＴＭＬファイルの大まかな構成

画像・音声・ジャンプの設定

メニューの左半分。

メニューの右半分。

【最近の追加機能】[編集]の中に有ります。

文法チェック（もどき）

コマンド追加

０Ａ <--> ０Ａ ０Ｄ

EUC <--> Shift JIS<-->JIS(7Bit)

どこまで、テキストが入力されているか？

背景・文字色の変更

WWWブラウザでの表の表示

画像の貼り込み

※ 注意事項　※

作者について。


画像の貼付は結構めんどくさく、困ります。

そこで、少しだけVisual化してみました。

ツールバーの罫線の横のボタンを押して下さいね。


※ 注意事項　※

・一般に、MOSAIC関係は、特にファイル指定していなければ、現ディレクトリーのindex.htmlを探しに行き、無ければエラーとなります。しかし、Windows3.1Jでは拡張子は３文字までのため、HOSTにFTPしてから拡張子を‘.html’に変更しましょう。（ひろ君とかずちゃんのＨＴＭＬ初心者教室）

・この「簡易ＨＴＭＬエディター」は、とりあえずHTML文法を知っている人が、簡単に操作できるように（実際は自分の勉強のため）と考え作られています。ＨＴＭＬ文法について全くの無知な人は、インターネット関係の雑誌で少し勉強した方が良いと思われます。

・EUC－＞Shift JISのコード変換機能を内蔵したので、各有名サイト(UNIX系)でのＨＴＭＬ文を参考に勉強できるようになりました。

・だいたいの機能が揃ってきた来たようなので、もうそろそろVerupはゆっくりとなります。

・もちろん、Bugレポートをお待ちしております。

・このプログラムは現時点で、フリーウェアーなので、自由に配布可能です。またどこか他のBBS転載の折はメールにてご連絡下さい。お約束（このソフトによってどのような損害が出ても私は責任を負いかねます。^_^;）また、間違ってどう転んでもシェアウェアーにはしません。（お金のためにプログラム作っているんじゃないﾓﾝ。）

・皆さんからのメールをお待ちしております。


--------------------------------------------------------------------------

  作成：	長嶋　宏和

Nifty-serve	ID : HAH01655

Internet	ID : hnagashi@fujita-hu.ac.jp

愛知県　藤田保健衛生大学からのアクセス

HOME Page

  http://www.fujita-hu.ac.jp/~hnagashi/

FTPサイト

  ftp.fujita-hu.ac.jp/pub/dos/net/web/editor

HTMLの拡張機能について。

  http://www.fujita-hu.ac.jp/~hnagashi/

  interner/home_pg/html30/html3.htm

--------------------------------------------------------------------------


Ver.2.4からコマンドの追加、一部変更が可能としました。

編集するには、ツールバーの余白(灰色)部分を右クリックして下さい。

編集後、画面に反映させる為には、ツールバー余白を左クリックします。

貼り込み機能のカスタマイズ用ファイルは、同じディレクトリーの「add_cmd.dat」の前半です。

'#'で始まる行はコメント行になります。

もちろん空白行は関係なしです。

'end'が行の頭にある場合はそこで終わりです

（なくても問題ありません）

一行に５つのパラメータを書き込みます','(ｶﾝﾏ)で分けます

1)コンボボックスに現れる文字

2)ﾘﾄﾞｩボタンに貼り付く文字

3)貼り込み文字（その１）

4)貼り込み文字（その２）

5)実行後編集ボックスを通る場合に１、そうでないと０

実際に貼り込まれるのは3)と4)ですが、編集画面にて選択文字がある場合にその選択文字が3)と4)の間に入ります。


Ver.2.4から文法チェック（もどき）が付加されました。

実行するのは「編集」-「文法チェック」を選択して下さい。

【チェック項目のカスタマイズ（追加項目）するには・・】

編集するには、ツールバーの余白(灰色)部分を右クリックして下さい。

編集後、画面に反映させる為には、ツールバー余白を左クリックします。

貼り込み機能のカスタマイズ用ファイルは、同じディレクトリーの「add_cmd.dat」の後半です。

ここからは、文法チェック用のカスタマイズ用データです。（ただ単に文字の検索だったりする。）

頭に「$」を必ず付けましょう。さもないとコメント行とみなします。

各行の項目は３つあり、[,]にて分けます。

１）’＃’＋検索文字（前）

２）検索文字（後）

３）コメント文字

つまり、「１）の文字の後には２）の文字がこなければならない！」のタイプのチェックをかけています。

そこで、問題なのが、""と、<!-･･->でくくられた部分です。これらには何が入ってくるのか分かりません（検索文字が入ることもあるだろう)ので、これを先に除外してしまい、そのデータをコピーして、そこに文法チェック（もどき）をかけることにしました。

”もどき”なのは何故かとゆうと・・・

<title>・・・・・・</title>のチェックの場合、

<title>・・・・・・</ti>では「</title>」が無いと言いますが、

<titl>・・・・・・</title>のように、前の文字がチェック外の場合、

エラーになりません。

チェック中は、飽きないように、画面にそのチェック操作を写すようにしました。（結構気に入っている(^_^)）

チェックが終わっても画面が元に戻らない場合には（まず無いと思う）ツールバーの余白部分を左クリックして下さい。


印刷


切り取り（カット）


複写（コピー）


貼り付け（ペースト）


ファイルの読み込み


ファイルの上書き


アンドゥ

一つ前に戻します。(不完全^^;)


カラーの変更

背景色・文字色・リンク色の変更を行います。

さらに細かい説明。


テーブル機能（表機能）

更に細かい説明。


ヘルプメニュー

ボタン上にマウスを置いておくと説明がでます。

一秒毎に書き換えを行います。

変な動きはご愛敬!!(^^;)


ヘルプの自動起動

「簡易HTMLｴﾃﾞｲﾀｰ」起動時にヘルプを一緒に立ち上げるかどうかの設定を行います。（次回起動時から有効となります。また、エディター本体と同じディレクトリーに無ければなりません。）


再命令

直前に行った貼り込みを、もう一度貼り込みます。


"＜"、"＞"、"＆"、”"、"ｽﾍﾟｰｽ"

"タイトル"

"中央寄せ"

"背景ファイル"

 "整形済みﾃｷｽﾄ"

"<HEAD>"

"</HEAD>"

"<BODY>"

"</BODY>"

"点滅"

"コメント"

"一定時間再ロード"

"一定時間後他HTMLへ"

背景、文字色の変更

メールの宛先


セルの縦方向の数の増減をします。


セルの横方向の数の増減をします。


これをチェックにすると、その行(列)の内容をヘッダー用とし、自動的に「太字・中央表示」となります。


実際のセルの配置の部分です。クリックにより下の編集ラインにそのセル内の内容が表示され、編集可能となります。

範囲選択し（クリックしたまま）「DEL」キーで、中身が削除されます。

セルを横方向、縦方向に接続可能です。ここでは、ボタン一発で、その作業ができます。その接続されたセルには「------」が入りますので、接続解除ボタンを押さないと、編集はできません。

注）セルを接続した場合、その形は四角形でなくてはなりません。


ここでセル内の文字列の編集を行います。

接続されたセルは編集できません。


現在選択されているセルの右側のセルを「接続」にします。

右側のセルが無い場合、もしくは、右側のセルがすでに「接続」されている場合にはボタンが押せません。


現在選択されているセルの下側のセルを「接続」にします。

下側のセルが無い場合、もしくは、下側のセルがすでに「接続」されている場合にはボタンが押せません。


選択されているセルが「接続」されている場合、使用可能となります。

「選択」されたセルは、このボタンで解除しないと編集はできません。


この表に題名をつける場合にその題名をここに入力します。


上の題名入力ボックスに何も入力されていない場合、題名は組み込まれません。


表の横幅を、ブラウザのどのくらいの横幅で表示するか指定します。

これを指定しない場合には、セルの横幅をセル内文字の一番長い文字列の幅にあわせます。


セル内文字の配置をどこにするか指定します。（ヘッダー部分は除く）

個別指定は自分でやってね！！


やーめた。やーめた　ってとこかな！！！


ＯＫ！！！これで、編集画面にコードを書き込むぜ！！！


表の外枠や中の区切り線をセットします。

デフォルトは１です。

これを０にすると枠が無くなります。


-------------------------------------------------------------------------------------------------

【実際のコードの説明です。】

<TABLE BORDER>

<TR>

<TD>A</TD> <TD>B</TD> <TD>C</TD>

</TR>

<TR>

<TD>D</TD> <TD>E</TD> <TD>F</TD>

</TR>

</TABLE>

これの結果は、

•	セルの横幅は、一番長いセルの長さに全て合わされます。

•	<TD>を<TH>にした場合、ヘッダーの意味になり、太字、セルの中央表示となります。

•	<TABLE BORDER=10>とすると枠の周りが、10の太さで表示されます。（=0にすると枠は表示されません）

•	<TD>と</TD>の間に何も文字がない場合、そのセルは浮き彫りのまま塗り潰されます。

•	VALIGN=TOP,BOTTOM,MIDDLE

により、セル内での文字の上下表示位置を設定します。

•	<TABLE BORDER CELLPADDING=10 CELLSPACING=10>

CELLPADDINGセルの上下左右の空白部分の大きさを示します。

CELLSPACINGセルとセルの間の枠の太さを示します。

•	セル内での改行には<BR>を用います。

<TH COLSPAN=2>とすることで、横のセルを２つ繋げます。

<TABLE BORDER>

<TR>

<TD　COLSPAN=2>AB</TD> <TD>C</TD>

</TR>

<TR>

<TD>D</TD> <TD>E</TD> <TD>F</TD>

</TR>

</TABLE>

これの結果は、

<TH ROWSPAN=2>同じように、今度は縦のセルを２つ繋げます。

<TABLE BORDER>

<TR>

<TD　ROWSPAN=2>A</TD> <TD>B</TD> <TD>C</TD>

</TR>

<TR>

<TD>E</TD> <TD>F</TD>

</TR>

</TABLE>

これの結果は、

CAPTION=TOP,BOTTOM

表の表題をどの位置に表示するか設定します。

<TABLE BORDER>

<CAPTION ALIGN=top>お題目</CAPTION>

<TR>

<TH>ながしま</TH>

</TR>

</TABLE>

この結果は、

<TABLE BORDER>

<CAPTION ALIGN=BOTTOM>お題目</CAPTION>

<TR>

<TH>ながしま</TH>

</TR>

</TABLE>

この結果は、

表の枠の利用法（その１）

表の枠の利用法（その２）


┏━┳━┳━┓

┃Ａ┃Ｂ┃Ｃ┃

┣━╋━╋━┫

┃Ｄ┃Ｅ┃Ｆ┃

┗━┻━┻━┛


┏━━━┳━┓

┃ＡＢ　┃Ｃ┃

┣━┳━╋━┫

┃Ｄ┃Ｅ┃Ｆ┃

┗━┻━┻━┛


┏━┳━┳━┓

┃Ａ┃Ｂ┃Ｃ┃

┃  ┣━╋━┫

┃  ┃Ｅ┃Ｆ┃

┗━┻━┻━┛


  　お題目

┏━━━━━┓

┃ ながしま ┃

┗━━━━━┛


┏━━━━━┓

┃ ながしま ┃

┗━━━━━┛

  　お題目


表の枠の利用法（その１）

<CENTER>

<TABLE BORDER=5>

        <TR>

        <TD><IMG SRC="index_t.gif"></TD>

        </TR>

</TABLE>

</CENTER>

このように、画像を入れ子にすると、画像の周りをおしゃれに囲んでくれます。


表の枠の利用法（その２）

<CENTER>

<TABLE BORDER=5>

        <TR>

        <TD><A HREF="index_t.HTML">ここをクリック！！</A></TD>

        </TR>

</TABLE>

</CENTER>

このように、リンク情報を入れ子にすると、周りをおしゃれに囲んでくれます。


この機能を使用すると、自分宛（ここで登録した人）にメールを簡単に送るフォームが作成できます。（なんと、入力フォームを使用しないでＯＫ！）

<ADDRESS>

<A HREF="mailto:hnagashi@fujita-hu.ac.jp">hnagashi@fujita-hu.ac.jp</A>

</ADDRESS>

hnagashi@fujita-hu.ac.jp　の部分の変更で自分宛のメール入力ダイアログが開き、メールの入力が可能となります。

ただし、Netscapeの[Options]-{Prefarences]-[Mail & News]で自分のアドレスを入力しておかないと「エラー」になります。


背景を指定の画像でうめます。

ex.<BODY BACKGROUND=XXXXX.gif>

xxxxx.gifの部分に貼り付けたい画像を書き込む。


画像、文字などをウェブ中央に配置します。

ex.<CENTER>中央に寄せる</CENTER>

「中央に寄せる」の文字をウェブの中央に配置する。

複数行にわたってもＯＫ！！(^_^)

画像もＯＫ！！

<CENTER><IMG SRC=title.gif></CENTER>


一定時間後、自動的に今表示されているＨＴＭＬを再ロードする。

<META HTTP-EQUIV=Refresh CONTENT=30>

30は30秒後を示す。

これは、ＨＴＭＬ3.0からの機能なので、Netscape1.1β1以降でしか使用できません。


<meta http-equiv=Refresh content=30;URL=http:index.html>

30は30秒後を示し、移動するＵＲＬを書き込む。

これは、ＨＴＭＬ3.0からの機能なので、Netscape1.1β1以降でしか使用できません。


このメニューに従って色を変更していくと、カラフルな画面が作成できます。

詳しくは、「作者について」で出てくるHTML拡張機能のWWWにアクセスして下さい。


ここで、どの文字の色を変更するか決定します。変更したい文字をクリックして下さい。（背景もありますので、お忘れ無く！！）

変更された色はここに反映されます。


現在の色変更する文字が表示されます。


ここのスクロールバーで色の変更を行います。

一覧から選択したい場合は、この下の「一覧」ボタンを押します。


このボタンで、色の一覧から選択ができます。


文字を点滅にします。

ex.<BLINK>H.Nagashima</BLINK>

H.Nagashima--->これが点滅状態になる。


HTML文編集フィールド


ファイルの

読み込み

上書き

書き込み(保存)

フォント変更

背景

印刷

最近読み込んだファイル名

（５つまで）

終了


[ファイル]-[背景]

背景色の変更が可能としたので、うまく中間色を使うと、「どこまで、リターンコードが入っているか？」が見れます。ただ、これは設定保存されません。


クリップボードへの

カット

コピー

ペースト

検索・置換

文法チェック（もどき）

０Ｄ ０Ａ <-> ０Ａ

EUC <-> Shift JIS<->JIS(7Bit)


【検索・置換機能】

簡単な検索・置換を付加してあります。大文字、小文字の区別をしていません。

検索は、エディター部のカーソルがある所からの検索ですので、最初からの検索を行うにはカーソルを最初の部分に持ってくる必要があります。

Ver.2.5より、挟み込み検索ができます。検索文字に検索文字、後部検索文字に検索したい文字列の最後の方の文字列を入力するとそれが検索できます。また、後部検索文字が入力されない場合は通常の検索となります。

Ver2.6からは「全部置換」を付けたので、検索文字に「<」,後部検索文字を「>」にすると、なんと、HTMLファイルを本文のみのテキストデータとして変換できます。


【改行・漢字コード変換機能】

ホストとしては、現在UNIXが使用されていることが多く、漢字コードは、SunOSのEUCコードが使用されており、また改行コードも&H0aのみです。それに対し、PC/AT互換機、MAC、NEC PCでは漢字コードにShift JIS、改行コードに&H0d &h0aとなります。

　その為、ホストの.htmlファイルの編集がFTPしてもできない（自分が知らないだけかも）のでした、（最近はShift JISも多くなりましたが、）そこで、勉強を兼ねて、EUC <--> Shift JIS の変換機能を搭載しました。

-------  他人の作ったホームページを参考にするやり方  -------

１）これで、Netscapeの[View]-[source]でファイル内容を見る。

２）マウス等で範囲選択する。

３）Ctrl + 'C'(これで選択範囲がクリップボードにコピーされる）

４）「簡易HTMLエディター」に貼り付ける。

５）漢字が化けてたら　[編集]-[EUC --> Shift JIS]を行う。

文法チェックすると、ﾊﾞｸﾞ持ちのファイルが分かりますﾖﾝ。

(これが結構多いんだーーーー(^_^;))

------------------------------------------------------------

注意）

・ShiftJISからEUC変換時にはキャラクターコードの関係上、英文字フォントである「Courire」に表示フォントを自動的に変更します。また、VisualBASICの表示コードの関係上、この変換時に、文末に$h0d,&h0aが勝手に加えられます。

・EUCからShiftJIS変換時には、表示フォントを「ＭＳ 明朝」に変更します。

なお、EUC<->ShiftJIS変換アルゴリズムは、(Niftyserve)FINET DL3に登録されている。山本　恭弘氏(BYA07153)の、「EUC/shift-JISの相互漢字コード変換」を参考にさせていただきました。この場をお借りしてお礼を申し上げます。

ついでに、JISｰ7Bit（こちらは、完全独自のアルゴリズム）もサポートしましたが、あくまでいいかげんだったりします。漢字In,Outのコードの設定は、設定ダイアログ上で行って下さい。


UNIXでは改行コードに&H0Aが使用されています。それに対し、PC/AT,MACでは改行に&H0D,&H0Aです。その為、UNIXのファイルを表示すると一行に続いて表示されてしまいます。そこで、この変換を行うことにより、正常に表示されます。

文字化けの場合は EUC --> Shift JIS  変換機能を使用して下さい。


ツールバー以外にもここから入力できます。

見出し

文字属性(基本型)

リンク

リスト

文字属性(特殊)

特殊文字

入力フォーム


設定

クレジット


プログラムの終了


リンク項目の貼り込み。


入力フォームの貼り込み。

左の部品を右側（オレンジ色）にドロップして下さい。


あれっ！？


ここに入力フォームの部品をドロップして下さい。


これをチェックすると、部品の選択後、このダイアログが消えずに残ります。


「閉じる」は閉じるに決まってるでしょう！！ﾌﾟﾝﾌﾟﾝ^_^;


【ＨＴＭＬのおおまかな構成】

<HEAD>	ヘッダーの開始

<TITLE>学校紹介</TITLE>

</HEAD>	ヘッダーの終了

<BODY>	本文の開始

：

：

：

：

：

</BODY>	本文の終了

<FORM>	入力フォームの始まり。

「ここに入力フォームの書式を書き込む」

</FORM>	入力フォームの終わり。

HEADとBODYは無くても動作するようですが、入力フォームを組み込む場合、ＦＯＲＭがないと動かない場合があるようです。(確認:Netscape1.1β3)


・HTMLの文法は単なるテキストのスクリプトにて書くことになります。

・実際には、文字列の前後等に特定の指示文字列を加えることになります。

・HTMLを書いてみると解りますが、何度も同じ命令を打ち込まなければなりません。そこで、その負担を軽減するためのプログラムです。テキストベースですので、GUIな編集はできません。あくまで、HTMLを書くための補助となります。

このヘルプは「怒濤のポップアップたどり」を行うことができます^^;

また「ページたどり」も“一度ページに入り込んでしまう”でいけます。


【使用法説明】

文字列を選択し、そこに何の処理をかけるかが基本になります。

例）タイトルを設定したい。

“ＴＩＴＬＥ“という文字列があった場合、これをタイトルにするには、

１：“ＴＩＴＬＥ”を選択し、反転させる“ＴＩＴＬＥ”

２：メニューバーの「選択」-「見出し」-「タイトル」を選択。

３：すると“ＴＩＴＬＥ”が<TITLE>ＴＩＴＬ</TITLE>となりこれがタイトルとして使用できるようになる。


【チェックボタンの意味、操作法】

コマンドの区切りで改行

前改行

後改行

選択後自動貼付

メニューヘルプ

ヘルプ自動起動

起動時に前回のファイルを読み込む

JIS(7Bit)での漢字In,Outコード


起動時に前回のファイルを読み込む

コマンドラインからでファイルを指定した場合には、そちらを優先します。


JISコードでは、２バイト文字列の前後に識別用のコードが入ります。数種類ありますが、とりあえず初期値のままがよいでしょう。

注）Netscape1.1β3では漢字outの「[esc](H」は識別しませんでした。


通常コマンド(?)の貼り込みは自動で行われるが、自動貼付のチェックボックスがチェックされていない場合にこのボタンにて貼り込みを行う。

また、選択を行った場合にとの機能がボタンに登録されるので、同じ動作を貼り込む場合にこのボタンでアンドゥが行える。


メニューバーにて項目を選択した際に、自動的にエデイット部分に変更を加える。

これがチェックされていないと、“貼り込み”ボタンを押さない限り、エディット部分に変更が加えられない。


“今日は雨だった。“を強調(BOLD)表示したい場合、

・コマンドの区切りで改行がチェックされている場合、

<B>

今日は雨だった。

</B>　となる

・チェックされていない場合

<B>今日は雨だった。</B>　となる

行ごとに属性を付ける場合(文字の大きさ等)分かり易い。


“そういえば、今日は雨だった。“の「雨」を強調(BOLD)表示したい場合、

・前改行、後改行がチェックされている場合、

そういえば、今日は

<B>雨</B>

だった。　　となる

・チェックされていない場合

そういえば、今日は<B>雨</B>だった。　となる

一行の文字列が長くなった時、一部の属性の変更を行う場合に自動改行となり便利。


【見出し】

・タイトル

HTMLにおけるタイトルの設定。Windowsではタイトルバーに出てくる文字列になる。

<TITLE>xxxxxx</TITLE>  にて記述する。


<BODY>・・・</BODY>

HTML文を囲む。最近は、なくてもＯＫみたい。


<HEAD>・・・</HEAD>

HTML文のタイトルなどを囲む。最近は、なくてもＯＫみたい。


これら文字属性は各自のMOSAICの設定により変わりますので、必ずしも思ったとうりの表示になるとは限りません。

文字サイズ<H1～6>

太字

斜め文字

タイプライター文字

アンダーライン

強制改行

罫線

コメント

段落

整形すみテキスト


文字の大きさです。

ex.<H1>H.Nagashima</H1>

「Ｈ」の次の数字が小さいほど文字は大きくなります。

<H1>  H.Nagashima

<H2>  H.Nagashima

<H3>  H.Nagashima

<H4>  H.Nagashima

<H5>  H.Nagashima

<H6>  H.Nagashima

HTML3.0からは、文字の大きさを相対的に変化できる、

<FONT SIZE=+2>・・</FONT>が使用できるようになりました。

デフォルトの大きさは３です。

詳しくは、「作者について」で出てくるHTML拡張機能のWWWにアクセスして下さい。


文字を肉厚にします。

ex.<B>H.Nagashima</B>

通常　H.Nagashima

太字　H.Nagashima


文字を斜め文字にします。

ex.<I>H.Nagashima</I>

通常　H.Nagashima

斜め　H.Nagashima


文字をタイプライタ文字(固定幅フォント)にします。

ex.<TT>H.Nagashima</TT>


文字にアンダーラインを追加します。

ex.<U>H.Nagashima</U>

通常　　　　　　H.Nagashima

アンダーライン　H.Nagashima


行を強制改行します。

ex.H.Nagashi<BR>ma

通常　　　　　　H.Nagashima

アンダーライン　H.Nagashi

ma


Ver.3.4より罫線を簡単に制御できるようになりました。

これにより、文書区切り用の罫線が入ります。

ex.<HR>H.Nagashima

----------------------------------------------------

H.Nagashima

SIZE=	にて、罫線の線の厚みが変更できます。

Width=	にて、罫線の横幅の指定可(Dot数、％）

Align=	にて表示位置の変更可(Left,Center,Right)

つまり、

<HR  WIDTH=50%  SIZE=10 ALIGN=CENTER>

「罫線を、横幅の半分(50%)で、厚さ10で中央に表示」となります。

また、影を無くし黒い線の罫線にするには、

<HR  NOSHADE>にします。


コメントとし、出力しません。

ex.<!-H.Nagashima->


段落につけると、MOSAICの自動折り返しに関係なく改行されます。

ex.H.Nagashimaです。<P>Hirokazuです。

H.Nagashimaです。

Hirokazuです。


通常、スペースは無視されますが、これで囲むことにより、スペースを含む文字列もそのまま出力が可能です。

ex.<PRE>This is a pen by C.Arai.</PRE>

通常　ThisisapenbyC.Arai.

整形　This is a pen C.Arai


MOSAICでは、他の文書や、音、動画などのリンクをはることが可能です。

他のHTMLへ

他のURLへ

FTPへ

場所の指定

指定場所へのジャンプ

画像

動画

音声

外部テキストファイル


同じコンピュータ内において、他のHTMLを呼び出します。

ex.<A HREF=Other.html>他のHTML</A>

この場合、「他のHTML」の部分のクリックにより、Other.htmlへジャンプします。


遠隔地にある端末であってもこのリンクにより、簡単にジャンプを設定できます。

ex.<A HREF=HTTP://www.ntt.jp>他のURL</A>

この場合、「他のURL」の部分のクリックにより、www.ntt.jplへジャンプします。


最近のMOSAICではFTPもサポートしているので、このリンクにより、簡単にFTPサイトジャンプを設定できます。

ex.<A HREF=FTP://FTP.mcom.com>他のFTP</A>

この場合、「他のFTP」の部分のクリックにより、FTP.mcom.comへジャンプします。


現在の位置(HTML内)に名前を付ける。これは次の“指定場所へのジャンプ”で使用可能。

ex.<A NAME=第一のページ></A>


指定位置へジャンプ。前回の「場所の指定」で付けた名前の所へジャンプする。

ex.<A HREF=#第一のページ></A>

＃に続き、名前を指定する。


画像も埋め込みが可能です。

ex.<IMG SRC=ne_chann.gif>

標準的には.gif,jpg,tifが多く使われてます。

応用）画像のクリックで他のHTMLへ飛ぶ。

<A HREF=HTTP://xxx.html><IMG SRC=jump.gif></A>

画像を中央に表示する方法。

<CENTER><IMG SRC=index.gif></CENTER>

画像を右端に付ける場合。

<IMG SRC=index.gif ALIGN=RIGHT>

•	ALIGN=LEFT,RIGHTの場合、複数の行にまたがる文書も全て回り込みますが、それ以外は一行しか回り込みは行われません。

•	その他に、ALIGN=top,texttop,middle,absmiddle,baseline,bottom,absbottomがあります。

HTML3.0では画像の拡大・縮小もサポートしています。

例）<IMG SRC=index.gif WIDTH=200 HEIGHT=200>

画像の周りに黒枠をつける。

<IMG SRC="sample.gif" BORDER=10>厚さ10の黒枠を付けます。

<<画像の２段時間差表示を行います。>>

まづ最初に、lowsrcで示される画像を表示後、その上に重ねて、srcで示される

画像の表示を行います。２番目の表示される画像は、強制的に１番目の画像の

大きさに調整されてしまいます。

<IMG src=""index_t3.gif" lowsrc="index_t2.gif">

詳しくは、「作者について」で出てくるHTML拡張機能のWWWにアクセスして下さい。


動画も埋め込みが可能です。ただし、再生に関しては、外部の他プログラムを立ち上げる。

ex.<A HREF=doraemon.mov>ドラエモン</A>

“ドラエモン“のクリックによりクイックタイムのドラエモンの動画がロードされます。

拡張子：	.mov	QuickTimeファイル

.mpg	MPEGファイル


音声も埋め込みが可能です。ただし、再生に関しては、外部の他プログラムを立ち上げる。

ex.<A HREF=bird.au>バード</A>

“バード“のクリックにより音声ファイル(bird.au)がロードされます。

拡張子：	.au	.auファイル

.aiff	.aiffファイル


外部テキストファイルのロードを行います

ex.<A HREF=README.txt>説明書</A>


リスト

段落書きリスト

番号付きリスト

定義型リスト


・段落書きリスト

これで指定することにより、段落をつくり、「・」を付けて表示する事ができます。

【例】

ウルトラマンの内の３人

<UL>

<LI>初代ウルトラマン

<LI>帰ってきたウルトラマン

<LI>ウルトラマンタロウ

</UL>

この３人のうち、「初代」は再放送でしか見てない。

【表示結果】

ウルトラマンの内の３人

　・初代ウルトラマン

　・帰ってきたウルトラマン

　・ウルトラマンタロウ

この３人のうち、「初代」は再放送でしか見てない

<UL TYPE=square>とする事で、「●」を「■」にできます。

その他に、type=square,circle,disc　があります。


・番号書きリスト

これで指定することにより、通し番号を付加し、表示する事ができます。

【例】

アニメについて、

<OL>

<LI>ガンダム（最初は人気なかったのよ）

<LI>テッカマンブレード

<LI>SPTレイズナー

</OL>

この３つのアニメは中盤をすぎた頃に早々に放送打ち切りが決まっていて、最後は雪崩のようにダダダッと終わった。

【表示結果】

アニメについて、

１　ガンダム（最初は人気なかったのよ）

２　テッカマンブレード

３　SPTレイズナー

この３つのアニメは中盤をすぎた頃に早々に放送打ち切りが決まっていて、最後は雪崩のようにダダダッと終わった。

デフォルトでは、1.,2.,と表示されますが、これを英文字、ローマ数字にも変更可能です。

TYPE=A	アルファベット（大文字）A,B,C･･･

TYPE=a	アルファベット（小文字）a,b,c････

TYPE=I	ローマ数字（大文字）Ⅰ,Ⅱ,Ⅲ････

TYPE=I	ローマ数字（小文字）i,ii,iii････

また、開始番号の変更も可能です。

<OL  TYPE=A  START=3>

英文字（大文字）で、３番目（C）から始める。もちろん、３の所は、ＣでもＯＫです。


・定型の段落指定を行う。

小見出しと、簡単な説明を加えたりするときに用いると便利。

<DT>の代わりに、<DD>にすれば、一段落としの段落になる

【例】

夏休みによくやってたアニメ

<DL>

<DT>デビルマン

<DD>内容はともかく終わりの歌は哀愁がただよっていてよかった。

<DT>ドロロンえんまくん

<DD>あんまりすきじゃないな。でも見てしまう^^；

<DT>メルモちゃん

<DD>キャンディーで変身とはなかなか庶民的でした。

</DL>

【表示結果】

夏休みによくやってたアニメ

デビルマン

内容はともかく終わりの歌は哀愁がただよって

いてよかった。

ドロロンえんまくん

あんまりすきじゃないな。でも見てしまう^^；

メルモちゃん

キャンディーで変身とはなかなか庶民的でした。


文字属性２

あんまり使うことはないでしょうからやめました。

は・は。は・・・(^o^;)


通常＜、＞、“、スペースなどは特殊な用途で使用します。

そのため、これらの表示には特定のものに置き換えます。

<	&lt;

>	&gt;

&	&amp;

speace	&nbsp;

“	&quot;


入力フォーム

<FORM・・・・

</FORM>

送信ボタン

リセットボタン

テキストボックス

チェックボックス

ラジオボタン

コンボボックス

テキストエリア

入力フォーム例


入力フォームの最初には必ずいれます。

ex.<FORM METHOD=POST ACTION=XXXXX>

最後は</FORM>でくくるのを忘れないように！！

XXXXXには入力フォームの処理を行うアドレスを書きます。


送信ボタン

このボタンを作成しておくと、押されたときに、処理系にとんでくれるようです(？)

ex.<INPUT TYPE=submit VALUE=XXXXX><P>

（改行もセットにしてある。）

XXXXXには、ボタン上に書かれる文字を入れる。


リセットボタン

フォーム中の入力されている値を初期値に戻します。

ex.<INPUT TYPE=reset VALUE=XXXXX><P>

（改行もセットにしてある。）

XXXXXには、ボタン上に書かれる文字を入れる。


テキストボックス。

一行入力用のテキストボックスを作成します。

ex.<INPUT NAME=YYYYY VALUE=XXXXX>

YYYYYには、これの名前、VALUE=XXXXXはなくてもＯＫ。

XXXXXには、ボタン上に書かれる文字を入れる。


チェックボタン

チェックボタンによる選択が可能となります。

ex.<INPUT TYPE=checkbox NAME=YYYYY VALUE=XXXXX><P>

（改行もセットにしてある。）

チェックをＯＮにするには、････XXX CHECKED><P>にする。

XXXXXには、???。

YYYYYには、???。


ラジオボタン

ラジオボタンによる選択が可能となります。

ex.<INPUT TYPE=radio NAME=YYYYY VALUE=XXXXX><P>

（改行もセットにしてある。）

チェックをＯＮにするには、････XXX CHECKED><P>にする。

XXXXXには、???。

YYYYYには、???。


コンボボックスの設定です。

ここを押すと、下向きにメニューがでてくる。

ex.

<SELECT NAME=test menu>

<OPTION SELECT>大判焼き

<SELECT>みたらし

<SELECT>五平餅

</SELECT>

<OPTION SELECT>にて、最初の選択項目とする。

<SELECT>に、項目の続きを書き込む。

注）<FORM･･･が設定していないとうまく表示されません。

応用）

<SELECT NAME=test menu MULTIPLE SIZE=10>

MULTIPLE	複数選択可。

SIZE	選択ボックスの常にみえる項目数。


テキスト入力範囲の設定。

フリーにテキストの入力をする場所を確保する。

ex.<TEXTAREA NAME=XXXXX ROWS=10 COLS=10></TEXTAREA>

XXXXXにはこのエリアの名前を書き込む。

ROWS	縦文字数

COLS	横幅文字数


入力フォーム例

これを選択すると、チェックボックスなどの入力フォームの簡単な例が貼り込まれます。

これを選択し、エディットしていくと簡単に拡張できるでしょう。

これだけをットしてファイルにし、MOSAIC等で読み込むとそれだけで一応形はできます。


こんな感じになります。


HTML講座

出演者）ひろ君先生（ひろ）、かずちゃん（かず）

かず：最近、私インターネットを繋げたの!!(^o^)/

ひろ：おめでとう。今はやりだものね。

かず：MOSAICっていろいろ表示できてとっても便利ですね。

ひろ：そうだね、相手先の管理者がHTMLとゆう文法で書いてつくってあるんだよ。プロバイダーによっては、個人のホームページを許可しているところもあるから自分でも作れるよ！！

かず：えっそうなの。自分のページが持てるの！

ひろ：簡単なテキスト形式だからちょっと勉強すれば誰でもすぐにできるさ。

かず：教えて、教えてm(_._)m

ひろ：じゃあ、簡単なものをつくってみようか。

かず：うんうん。

ひろ：まず「簡易HTMLエディター」を立ち上げてと。下に白い部分があるだろ。ここがテキストエディターだから此処に色々書き込んで行くんだ。

かず：この大っきな部分ね。で、何を書くの？

ひろ：まず、<TITLE>kazu chann</TITLE> と打ち込んでごらん。

かず：うん。この「TITLE」は大文字なの？

ひろ：小文字でもＯＫだよ。

かず：解ったわ。

ひろ：じゃあ改行して次の行に「わたしの先生はひろかず君<P>」と打ち込んでごらん。

かず：<P>って何。

ひろ：後でまとめて説明するから、まず打ってごらん。

かず：はーい（ｼﾌﾞｼﾌﾞ）

ひろ：じゃあ改行して次の行に「わたしはぐずでのろまな亀<P>」と打ち込んでごらん。

かず：なんですって（ﾌﾟﾝﾌﾟﾝ）

ひろ：例だよ例。

かず：・・・・。

ひろ：これをファイルに保存してごらん。拡張子は’htm’とするんだ。とりあえず’index.htm’としよう。

かず：Windowsの一般的な操作は任せて！！

ひろ：よし、保存できたね、それじゃMOSAICを起動してこの保存したファイルを読み込んでみよう。

かず：あっ出た出た。さっき入力した文字がでたわ。(^.^)

ひろ：さっき入力した文字より出ている文字が少ないのに気づいたかい？

かず：えっ？？。そういえば<TITLE>や<P>が無いわ。

ひろ：そうだね。そこでだ、MOSAICのタイトルバーを見てごらん。

かず：あっ。「kazu chann」って出てる。わかったわ、<TITLE>と</TITLE>で囲まれた部分がタイトルバーに来るのね。

ひろ：との通りだね、こんなふうに、「命令で文字を囲んで入力する」とゆうのがHTML文法の基本なんだ。

かず：へーなんだ簡単だね。

ひろ：ちなみに<H1>と</H1>で挟むとその文字が大きく表示されるんだ。

かず：もう私のことは、「HTML使いのかずちゃん」って呼んでちょうだい。

ひろ：ｺﾞﾂﾝ。調子にのるな。全く。・・・じゃあ<P>はどう言う意味だ。！！

かず：えーーとこれは<P>と</P>で囲まれ・・・</P>が無い？！

ひろ：これは「ここで、改行せよ」とゆう意味なんだ。このように単独のコマンドもあるから注意せねばイカン。

かず：でももともと違う行に書いてたよ。

ひろ：MOSAICではスペースや改行は無視（幅がいっぱいになったら自動改行）されるんだ、だから、自分の改行したいところで、<P>を入れる必要があるんだ。

かず：ふーんめんどくさいんだーー。

ひろ：つぎはマウスをクリックしたら画面が変わるのを作ってみよう。

かず：めんどくさそう。

ひろ：なーに簡単だよ。じゃあ、もう一つファイルを作って'index2.htm'としておこう。

かず：簡単簡単。HTML使いのかず・・・私にまかせて。！！

ひろ：・・・まあいいだろう。じゃあ'index.htm'の一部をクリックしたら'index2.htm'へ行くようにしよう。

かず：じゃあ'index.htm'を編集するやね。

ひろ：そうだよ、開いて置いてくれたまえ。

かず：何よ偉そうに(ﾌﾟﾝﾌﾟﾝ)

ひろ：ファイルの最後に　<A HREF="index2.htm">ここ</A>　と打ち込んでごらん。

かず：あっ何か解ってきたわ。

ひろ：入力したらさっきみたいにMOSAICを立ち上げて結果を見てみよう。

かず：あっ「ここ」の部分が色が違う！！

ひろ：じゃあクリックしてごらん。

かず：あっ変わった。これは　index2.htm　の内容だわ。

ひろ：これを「リンク」とゆうんだ。日本語で言えば「結びつける」だね。

かず：絵はどうやって貼るの。

ひろ：まず、Photoshopなんかで絵を作って'.gif'ファイルで保存しよう。あっ「インデックスカラー」にしないと'.gif'ファイルで保存できないからね。

かず：はい。'title.gif'で保存しました。

ひろ：よーし。じゃあ <IMG SRC="title.gif"> と入力してみよう。

かず：入力ＯＫ。MOSAICを立ち上げてっと。あっ出た出た。

ひろ：たいていのMOSAICは'.gif'ファイルをサポートしているから絵はこの形式がいいと思うよ。

かず：ねえねえ。絵をクリックしてジャンプするのはどうするの。

ひろ：リンク機能を使えば簡単さ。！！

かず：'index.htm'に貼り付けた'title.gif'をクリックしたら、'index2.htm'へジャンプするようにリンクを設定したいわ。(^_^)

ひろ：うん、それなら簡単だよ。<A HREF="index2.htm"><IMG SRC="title.gif"></A> とするんだ。

かず：あっさっきのジャンプの時は「ここ」だった部分が変わってるだけだわ。

ひろ：そうだね、前の時は「ここ」を押したらジャンプしから、今回は <IMG SRC="title.gif"> を押したらジャンプすると読めるね。

かず：入力・・確認・・・'title.gif'の周りが青くなってる。

ひろ：そうだね、リンクが貼られてる証拠だよ。クリックしてごらん。

かず：動いた、動いた。

ひろ：他にも動画や音声などもリンクを貼れるんだ。

かず：へー。よーっしがんばって作るぞーーー。

ひろ：その前に、他の色々な所のＷＷＷにアクセスして、どんな作りか勉強してみるといいよ。

かず：でも自分のプロバイダーしかアクセス権持ってないから他の所はMOSAICで表示できてもファイルは見れないわ。

ひろ：それは違うな、MOSAICで表示できるとゆう事は、ファイルが転送されてきているからなんだ。

かず：じゃあどうやるの？

ひろ：僕の使ってるNetscapeとゆうやつでは[View]-[Source]で見ることができるんだ。他のMOSAICでもその機能はあると思うよ。

かず：でも[編集]-[コピー]が使えないみたい。

ひろ：そんなときには、範囲を選択して CTRL+'C' を押してごらん。そして、「HTMLエディター」に[編集]-[貼付]してみよう。

かず：できたわ、CTRL+'C' はコピーのショートカットキーね。

ひろ：そうだね、ところで、日本語は正しく表示されているかい？

かず：うーーん、何か'!'だとか'･'だとか全然読めないや。

ひろ：それは通称「文字化け」とゆうやつだ。とりあえず[編集]-[EUC -> Shift JIS]を選択してみよう。

かず：はい。・・・日本語がでました。

ひろ：話すと長くなるから一種のおまじないと思って使うといいよ。だめだったらあきらめよう。

かず：ふんふん。何故か解からんがまあ良しとしておこっと。

ひろ：これで、他のhtmlファイルが手に入った訳だ、これを教科書に勉強するといいよ。

かず：はーーーい。

ひろ：（後日）どう、やってる？

かず：うーん、<>がいっぱいになっちゃって。「わけわかんなーーーい」状態なの。

ひろ：色々書き込んでいくと、よっぽど慣れないとそうなってしまうんだよね。

かず：<>の数かぞえてたら目が痛くなっちゃって。

ひろ：バッカダナー。簡単な文法チェックがあるからそれを使うと良いんだよ。

かず：何？？？それ？？？

ひろ：[編集]-[文法チェック（もどき）]を選択してごらん。

かず：「もどき」・・怪しいな・・まっいいか。画面が動いてる。

ひろ：それはチェックしている画面なんだ。

かず：かっこいい。あっエラーがでた。

ひろ：そうそう、これを基に直していくと良いよ。

かず：直して、さらに「文法チェック」・・・「問題ありません」・・・やった。

ひろ：あくまでも（もどき）だから、最終チェックは自分で行ったほうが良いね。

かず：よーっし、便利なもの教えてもらった。

ひろ：頑張ってやってくれ。いいもんできたら教えてね。